<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漂流瓶 - 暖言树洞</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 font-sans text-gray-800">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md fixed w-full z-10 top-0">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-tree text-green-500 text-2xl"></i>
                <span class="text-xl font-bold text-green-600">暖言树洞</span>
            </div>
            <div class="hidden md:flex space-x-6">
                <a href="index.html" class="text-gray-700 hover:text-green-500 transition-colors">首页</a>
                <a href="diary.html" class="text-gray-700 hover:text-green-500 transition-colors">心情日记</a>
                <a href="drift.html" class="text-green-500 font-medium">漂流瓶</a>
                <a href="mall.html" class="text-gray-700 hover:text-green-500 transition-colors">公益商城</a>
            </div>
            <div class="flex items-center space-x-4">
                <a href="profile.html" class="text-gray-700 hover:text-green-500 transition-colors">
                    <i class="fas fa-user-circle text-xl"></i>
                </a>
                <button class="md:hidden text-gray-700">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-24">
        <div class="max-w-3xl mx-auto">
            <h1 class="text-3xl font-bold text-gray-800 mb-2">日记漂流瓶</h1>
            <p class="text-gray-600 mb-8">捡起他人的心情，留下温暖的点评，让善意传递</p>

            <!-- 抽取次数提示 -->
            <div class="bg-blue-50 border border-blue-100 rounded-lg p-4 mb-8 flex items-center">
                <i class="fas fa-info-circle text-blue-500 mr-3 text-xl"></i>
                <div>
                    <p class="text-gray-700"><span class="font-medium">今日剩余抽取次数:</span> <span class="text-green-500 font-bold">3</span> 次</p>
                    <p class="text-sm text-gray-500">每天可抽取3个漂流瓶，次日0点重置次数</p>
                </div>
            </div>

            <!-- 漂流瓶区域 -->
            <div id="bottleContainer" class="mb-8">
                <!-- 初始状态：未抽取漂流瓶 -->
                <div id="initialState" class="text-center py-16">
                    <div class="w-32 h-32 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-paper-plane text-blue-500 text-4xl floating"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">还没有漂流瓶哦</h3>
                    <p class="text-gray-600 mb-6 max-w-md mx-auto">点击下方按钮，抽取一个来自陌生人的心情日记，用善意的点评温暖彼此</p>
                    <button id="pickBottleBtn" class="btn-primary">
                        <i class="fas fa-hand-holding-heart mr-2"></i>抽取漂流瓶
                    </button>
                </div>

                <!-- 漂流瓶内容（默认隐藏） -->
                <div id="bottleContent" class="hidden">
                    <div class="bg-white rounded-xl shadow-md p-6 mb-6">
                        <div class="flex justify-between items-start mb-4">
                            <div class="flex items-center">
                                <img src="https://picsum.photos/id/237/40/40" alt="匿名用户" class="w-10 h-10 rounded-full mr-3">
                                <div>
                                    <h4 class="font-medium">匿名用户</h4>
                                    <p class="text-sm text-gray-500">3小时前</p>
                                </div>
                            </div>
                            <span class="badge badge-secondary">已匿名</span>
                        </div>
                        <h3 class="text-xl font-semibold mb-3">今天有点小失落</h3>
                        <div class="prose max-w-none text-gray-700 mb-6">
                            <p>今天工作上犯了个小错误，被领导批评了。虽然知道是自己的问题，但还是忍不住有点难过。晚上一个人走在回家的路上，看着路灯下自己的影子，突然觉得有点孤单。希望明天会好起来吧。</p>
                        </div>
                        <div class="flex justify-between items-center text-sm text-gray-500">
                            <span><i class="fas fa-shield-alt mr-1"></i> 已进行隐私计算处理</span>
                            <span>剩余点评次数: <span class="text-green-500 font-medium">1</span></span>
                        </div>
                    </div>

                    <!-- 点评区域 -->
                    <div class="bg-white rounded-xl shadow-md p-6">
                        <h3 class="text-lg font-semibold mb-4">写下你的暖心点评</h3>
                        <textarea placeholder="用温暖的话语鼓励对方吧..." rows="4" class="form-input w-full resize-none mb-4"></textarea>
                        <div class="flex justify-end">
                            <button id="submitComment" class="btn-primary">
                                <i class="fas fa-paper-plane mr-1"></i> 提交点评
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 隐私说明 -->
            <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 text-sm text-gray-600">
                <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                    <i class="fas fa-shield-alt text-green-500 mr-2"></i>隐私保护说明
                </h4>
                <ul class="list-disc list-inside space-y-1">
                    <li>所有漂流日记均经过隐私计算处理，去除个人敏感信息</li>
                    <li>用户之间无法获取彼此的真实身份信息</li>
                    <li>请遵守社区规范，发布友善、积极的点评内容</li>
                    <li>不当言论将被系统过滤，严重者将限制使用</li>
                </ul>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 (移动端) -->
    <nav class="md:hidden fixed bottom-0 w-full bg-white shadow-lg border-t border-gray-200">
        <div class="flex justify-around py-3">
            <a href="index.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="diary.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-pen-to-square text-xl"></i>
                <span class="text-xs mt-1">日记</span>
            </a>
            <a href="drift.html" class="flex flex-col items-center text-green-500">
                <i class="fas fa-message text-xl"></i>
                <span class="text-xs mt-1">漂流瓶</span>
            </a>
            <a href="profile.html" class="flex flex-col items-center text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </nav>

    <script>
        // 抽取漂流瓶功能
        document.getElementById('pickBottleBtn').addEventListener('click', function() {
            // 隐藏初始状态，显示漂流瓶内容
            document.getElementById('initialState').classList.add('hidden');
            document.getElementById('bottleContent').classList.remove('hidden');

            // 模拟减少抽取次数
            const countElement = document.querySelector('.text-green-500.font-bold');
            let count = parseInt(countElement.textContent);
            if (count > 0) {
                countElement.textContent = count - 1;
            }
        });

        // 提交点评功能
        document.getElementById('submitComment').addEventListener('click', function() {
            const textarea = document.querySelector('textarea');
            if (textarea.value.trim() === '') {
                alert('请输入点评内容再提交哦~');
                return;
            }

            alert('点评提交成功！你的善意已经传递给对方~');
            // 重置漂流瓶状态
            document.getElementById('bottleContent').classList.add('hidden');
            document.getElementById('initialState').classList.remove('hidden');
            textarea.value = '';
        });
    </script>
</body>
</html>